<template>
	<view class="cont-box" style="margin: 10rpx 20rpx;">
		<u-sticky>
			<view v-if="!isClose && isShare && detail.state == 1" class="u-flex u-row-between"
				style="background-color: #fff;padding:10rpx 20rpx;">
				<view @click="initData"
					style="width: 150rpx;line-height: 60rpx; text-align: center;border-radius: 10rpx;background-color:#3C9CFF;color: white;font-size: 28rpx;font-weight: 600;">
					我要引流</view>
				<u-icon @click="isClose = true" name="close-circle" size="24"></u-icon>
			</view>
		</u-sticky>
		<text class="item-title u-m-t-30">{{detail.title}}</text>
		<view class="u-flex" style="line-height: 80rpx;">
			<text
				class="item-time">{{timeDifference($u.timeFormat(new Date(detail.publishDate),'yyyy-mm-dd hh:MM'))}}</text>
			<text style="font-size: 28rpx; color: #666;margin-left: 20rpx;">{{detail.author}}</text>
		</view>
		<!-- 选择素材-->
		<view v-if="!currentItem.id && detail.state == 1" @click="sucClick(0)" class="material1 u-m-t-30" style="padding-top: 1rpx;">
			<!-- 请选择素材 -->
			<text style="position: absolute;z-index: 99;color: orange;font-size: 32rpx;
			font-weight: 700 top:10rpx;right: 0rpx;background-color: #ff3434;color: #fff;padding: 2rpx 4rpx;">替换为我的</text>
			<image style="width: 100%;height: 300rpx;"
				src="https://job.ydylmold.cn/mingpian/image/comIndex/topBanner.jpg"></image>
		</view>
		<view style="position: relative;padding: 0 10rpx;margin-top: 30rpx;">
			<view style="margin: 20rpx 0;line-height: 70rpx;color: #3F3F3F;font-size: 34rpx;text-indent: 48rpx;"
				v-if="currentItem.content&&currentItem.content.length>0">
				{{currentItem.content}}
			</view>
			<view style="margin-bottom: 20rpx;" v-if="currentItem.imagesPath&&currentItem.imagesPath.length>0">
				<u-image @click="previewImage(currentItem.imageurl)" :lazyLoad="true" width="100%" height="150px"
					:src="currentItem.imageurl" mode="aspectFill">
				</u-image>
			</view>
			<view @click="currItemDelete(0)" v-if="!isOther && currentItem.id"
				style="position: absolute;right: -15rpx;top: -35rpx;">
				<u-icon name="close-circle" color="#6C6B69" size="18"></u-icon>
			</view>
		</view>
		<video v-if="detail.videos" style="width: 100%;" :src="$filePath+'110/'+detail.videos"></video>
		<audio v-if="detail.audios" style="text-align: center;margin-top: 20rpx;" :src="current.src"
			:poster="current.poster" :name="current.name" :author="current.author" :action="audioAction"
			controls></audio>
		<u-parse :html="detail && detail.introduce"></u-parse>
		<!-- 选择素材-->
		<view v-if="!currentItem1.id  && detail.state == 1" @click="sucClick(1)" class="material1 u-m-t-30" style="padding-top: 1rpx;">
			<!-- 请选择素材 -->
			<text style="position: absolute;z-index: 99;color: orange;font-size: 32rpx;
			font-weight: 700 top:10rpx;right: 0rpx;background-color: #ff3434;color: #fff;padding: 2rpx 4rpx;">替换为我的</text>
			<image style="width: 100%;height: 300rpx;"
				src="https://job.ydylmold.cn/mingpian/image/comIndex/topBanner.jpg"></image>
		</view>
		<view style="position: relative;margin-top: 10rpx;padding: 0 10rpx;">
			<view style="margin: 20rpx 0;line-height: 70rpx;color: #3F3F3F;font-size: 34rpx;text-indent: 48rpx;"
				v-if="currentItem1.content&&currentItem1.content.length>0 ">
				{{currentItem1.content}}
			</view>
			<view style="margin: 20rpx 0;" v-if="currentItem1.imagesPath&&currentItem1.imagesPath.length>0">
				<u-image @click="previewImage(currentItem1.imageurl)" :showLoading="true" :src="currentItem1.imageurl"
					width="100%" height="150px" mode="aspectFill"></u-image>
			</view>
			<view @click="currItemDelete(1)" v-if="!isOther && currentItem1.id"
				style="position: absolute;right: -15rpx;top: -15rpx;">
				<u-icon name="close-circle" color="#6C6B69" size="18"></u-icon>
			</view>
		</view>
		<!-- 保存 -->
		<view class="saveBox" v-if="!isEdit && showShareBox">
			<view class="u-flex u-row-between" style="width: 100%;padding: 0 40rpx;box-sizing: border-box;">
				<view class="u-flex u-row-center" @click="toUrl('/pages/newsPart/index/mydrainage')">
					<button
						style="color: white; width: 300rpx;height: 78rpx;background-color:#3C9CFF;margin-top:60rpx ;"
						class="share-btn comText u-font-36 u-weight-700 u-flex u-col-center u-row-center b-r-50"
						open-type="share">我的引流</button>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="u-flex u-row-center">
					<button
						style="color: white; width: 300rpx;height: 78rpx;background-color:#3C9CFF;margin-top:60rpx ;"
						class="share-btn comText u-font-36 u-weight-700 u-flex u-col-center u-row-center b-r-50"
						open-type="share">立即分享</button>
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="u-flex u-row-center" @click="shareItem">
					<view class="comText u-font-36 u-weight-700 u-flex u-col-center u-row-center b-r-50"
						style="color: white; width: 300rpx;height: 78rpx;background-color:#3C9CFF;margin-top:60rpx ;">
						立即分享 </view>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="saveBox" v-if="isEdit && !showShareBox">
			<view @click="$u.throttle(btnClick,2000)"
				style="width: 80%;text-align: center;line-height: 60rpx;  padding: 10rpx 100rpx;border-radius: 10rpx;background-color:#3C9CFF;color: white;font-size: 32rpx;font-weight: 600;">
				保存</view>
		</view>
		<!-- 评论 -->
		<view v-if="ispinlunState && !showShareBox && detail.state == 1">
			<view class="selection">
				<view class="title"> 评论 </view>
				<hb-comment :postDetail="detail" :showClose="true" ref="hbComment" deleteTip="确认删除？"
					:cmData="commentData" :currId="currIdF" :hbHeigth="100" @collectionPost="collectionPost"
					@memberLike="memberLike" @getLastPage="getLast" @add="add" @del="delCom"></hb-comment>
			</view>
		</view>
		<uni-popup ref="bomPop" type="bottom" class="pop-box">
			<view class="sel-pop">
				<view class="u-flex u-row-between">
					<text></text>
					<u-icon @click="$refs['bomPop'].close()" name="close-circle" size="24"></u-icon>
				</view>
				<scroll-view scroll-y="true" @scrolltolower="lower"
					style="height: 65vh;margin-top: 30rpx;margin-bottom: 30rpx;">
					<view v-for="(item,index) in materialList" :key="index" @click="itemlistClick(item,index)"
						class="itemlist" :style="currentItemIndex==index?'border:4rpx solid #3C9CFF':''">
						<!-- 文本 -->
						<view class="listText" v-if="item.content&&item.content.length>0">
							{{item.content}}
						</view>
						<view class="listImage" v-if="item.imagesPath&&item.imagesPath.length>0">
							<u-image :src="item.imageurl" width="100px" height="100px" mode="aspectFill"></u-image>
						</view>
					</view>
				</scroll-view>
				<view class="btnBox">
					<view class="blue-btn" @click="toUrl('/pages/newsPart/index/addmaterial')"> 添加素材 </view>
					<view class="blue-btn u-m-l-20" @click="saveClick">确定</view>
				</view>
			</view>
		</uni-popup>
		<my-auth-modal></my-auth-modal>
		<cover-view>
			<view class="yindao" :style="'height:'+(screenHeight*2)+'rpx;'" v-if="yindaoye" @click="yindaoye = false">
				<image src="https://job.ydylmold.cn/mingpian/image/me/yindaoye1.png"></image>
			</view>
		</cover-view>
	</view>
</template>
<script>
	import {
		convertHtmlToText
	} from '@/static/js/parse.js'
	// #ifdef H5
	import {
		onShareData
	} from '@/utils/share.js'
	// #endif
	// #ifdef MP-WEIXIN
	import {
		shareMixins
	} from '@/mixins/share'
	// #endif
	import Common from '../js/commFun.js';
	import {
		timeDifference
	} from '@/utils/formaterTime.js'
	import {
		mapGetters
	} from 'vuex';
	import {
		getToken
	} from '@/utils/token.js'
	import {
		queryPortalNewsById2,
		updQuickContact,
		savePortalNewsItem,
		searchPortalNewsSource,
		searchPortalNewsIsExist
	} from '@/common/api/news.js'
	import hbComment from '../components/hb-comment/components/hb-comment/hb-comment.vue'
	export default {
		// #ifdef MP-WEIXIN
		mixins: [shareMixins],
		// #endif
		components: {
			hbComment
		},
		data() {
			return {
				detail: {},
				acId: '',
				//评论列表
				common: null, //评论
				commentData: {
					comment: [],
					status: 'loading'
				},
				currIdF: 0, //评论滚动的id
				useNum: '',
				current: {
					poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
					name: '音频',
					author: '暂无',
					src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
				},
				audioAction: {
					method: 'pause'
				},
				newsCompany: '',
				materialList: [],
				clickItem: {},
				clickItem1: {},
				// 当前选中的素材
				currentItem: {},
				currentItem1: {},
				currentItemIndex: 0,
				sucaiIndex: '',
				allPage: 1,
				currentPage: 1,
				acType: '',
				isShare: false,
				hasData: false,
				isOther: true,
				isClose: false,
				showShareBox: false,
				isEdit: false,
				yindaoye: false,
				screenHeight: '',
				acItem:{}
			}
		},
		onLoad: function(option) {
			this.acId = option.newsId
			option.isShare || option.isshare ? this.isShare = true : this.isShare = false
			if (option.item && option.item != 'null') {
				const item = JSON.parse(decodeURIComponent(option.item));
				this.acItem = item
				this.hasData = true
				if (item.topId) {
					this.currentItem['id'] = item.topId
					this.currentItem['companyId'] = item.companyNo
					this.currentItem['content'] = item.topContent
					this.currentItem['craftsmanId'] = item.craftsmanId
					this.currentItem['imagesPath'] = item.topImg
					this.currentItem['imageurl'] = "https://www.ydylmold.cn/file/getPlayResource/108/" + item.topImg
				}
				if (item.endId) {
					this.currentItem1['id'] = item.endId
					this.currentItem1['companyId'] = item.companyNo
					this.currentItem1['content'] = item.endContent
					this.currentItem1['craftsmanId'] = item.craftsmanId
					this.currentItem1['imagesPath'] = item.endImg
					this.currentItem1['imageurl'] = "https://www.ydylmold.cn/file/getPlayResource/108/" + item.endImg
				}
				if (this.isLogin) {
					if (item.companyNo == getToken('useNum') || item.craftsmanId == getToken('useNum')) {
						this.isOther = false
					} else {
						this.isOther = true
					}
				}
			}
			this.newsCompany = getToken('newsCompany')
			this.getDetailById(option.newsId)
			// this.init()
			let that = this
			uni.getSystemInfo({
				success(res) {
					that.screenHeight = res.screenHeight
				}
			})
		},
		onShow: function() {
			if (this.isFresh) {
				this.$store.commit('isFresh', false)
				this.getDetailById(this.acId)
				this.materialList = []
				this.currentPage = 1
				this.init()
			}
		},
		computed: {
			...mapGetters(['isFresh', 'isLogin']),
			ispinlunState() {
				if (this.isEdit) {
					return false
				} else {
					return true
				}
			}
		},
		methods: {
			shareItem() {
				// #ifdef H5
				this.yindaoye = true
				uni.pageScrollTo({
					duration: 100, //过渡时间
					scrollTop: 0, //到达距离顶部的top值
				})
				let params = {}
				// #endif
			},
			initData() {
				if (!this.isLogin) {
					this.$store.dispatch('showAuthModal');
					return;
				}
				//上 下
				this.currentItem = {
					companyId: '',
					content: '',
					craftsmanId: '',
					id: '',
					imagesPath: '',
					imageurl: ''
				}
				this.currentItem1 = {
					companyId: '',
					content: '',
					craftsmanId: '',
					id: '',
					imagesPath: '',
					imageurl: ''
				}
				this.$refs['bomPop'].open()
				this.isClose = true
				//返回顶部
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},
			previewImage(url) {
				uni.previewImage({
					current: 0,
					urls: [`${url}`]
				})
			},
			lower() {
				//console.log("滚动到底部", this.currentPage, this.allPage)
				if (this.currentPage < this.allPage) { //如果当前页小于总页数
					this.currentPage++
					this.init()
				}
			},
			btnClick() {
				if (this.currentItem.id || this.currentItem1.id) {
					//次数扣除
					let param = {}
					if (getToken('version') == 1) {
						param['craftsmanId'] = getToken('useNum')
						param['companyId'] = ''
					} else {
						if (getToken('newsCompany')) {
							param['companyId'] = getToken('newsCompany')
						}
						param['craftsmanId'] = ''
					}
					param['modleName'] = 'mingpian'
					param['setType'] = 4 //套餐类型(1-极速联系,2-发布招聘,3-添加好友,4-文案引流,5-采购订单,6-维修订单,7-法律咨询,8-项目共建)
					updQuickContact(param).then(res => {
						res = res.data
						if (res.code == 200) {
							//有次数 ->发布
							let params = {}
							if (getToken('version') == 1) {
								params['craftsmanId'] = getToken('useNum')
								params['companyNo'] = ''
							} else {
									params['companyNo'] = getToken('useNum')
								params['craftsmanId'] = ''
							}
							params['entityName'] = this.acType //adbCollege portalNews
							params['entityId'] = this.detail.id
							if (this.currentItem.id) {
								params['topId'] = this.currentItem.id
							} else {
								params['topId'] = ''
							}
							if (this.currentItem.id && this.currentItem.content && this.currentItem.content
								.length > 0) {
								params['topContent'] = this.currentItem.content
							} else {
								params['topContent'] = ''
							}
							if (this.currentItem.id && this.currentItem.imagesPath && this.currentItem.imagesPath
								.length > 0) {
								params['topImg'] = this.currentItem.imagesPath
							} else {
								params['topImg'] = ''
							}
							if (this.currentItem1.id) {
								params['endId'] = this.currentItem1.id
							} else {
								params['endId'] = ''
							}
							if (this.currentItem1 && this.currentItem1.content && this.currentItem1.content
								.length > 0) {
								params['endContent'] = this.currentItem1.content
							} else {
								params['endContent'] = ''
							}
							if (this.currentItem1 && this.currentItem1.imagesPath && this.currentItem1.imagesPath
								.length > 0) {
								params['endImg'] = this.currentItem1.imagesPath
							} else {
								params['endImg'] = ''
							}
							//console.log('保存params', params)
							savePortalNewsItem(params).then(res => {
								res = res.data
								if (res.code == 200) {
									//刷新页面
									this.acItem = {}
									this.getDetailById(this.acId)
									uni.showToast({
										title: '保存成功！',
										icon: "none"
									})
									this.showShareBox = true
									this.isEdit = false
								}
							})
						} else {
							uni.showModal({
								title: '提示',
								content: '次数不够，是否立即购买',
								success: (e) => {
									if (e.confirm) {
										uni.navigateTo({
											url: '/pages/meSub/vipPage/vipPage'
										})
									}
								}
							})
						}
					})
				} else {
					uni.showToast({
						title: '至少填充一个素材！',
						icon: 'none'
					})
					return
				}
			},
			currItemDelete(index) {
				this.isEdit = true
				this.showShareBox = false
				if (index == 0) {
					this.currentItem = {}
				} else if (index == 1) {
					this.currentItem1 = {}
				}
			},
			saveClick() {
				this.isEdit = true
				this.showShareBox = false
				if (this.sucaiIndex == 0) {
					this.currentItem = this.clickItem
				} else if (this.sucaiIndex == 1) {
					this.currentItem1 = this.clickItem1
				}
				//console.log("上currentItem", this.currentItem)
				//console.log("下currentItem1", this.currentItem1)
				this.currentItemIndex = 0
				this.$refs['bomPop'].close()
			},
			itemlistClick(item, index) {
				this.currentItemIndex = index
				if (this.sucaiIndex == 0) {
					this.clickItem = item
				} else if (this.sucaiIndex == 1) {
					this.clickItem1 = item
				}
			},
			init() {
				if (!this.isLogin) {
					return
				}
				let params = {}
				params['craftsmanId'] = getToken('useNum')
				if (getToken('newsCompany')) {
					params['companyId'] = getToken('newsCompany')
				}
				params['state'] = 1
				params['page.current'] = this.currentPage
				searchPortalNewsSource(params).then(res => {
					res = res.data
					if (res.code == 200) {
						this.materialList = this.materialList.concat(res.data.records)
						this.clickItem = this.materialList[0]
						this.clickItem1 = this.materialList[0]
						this.materialList.forEach((item, index) => {
							if (item.imagesPath && item.imagesPath.length > 0) {
								item.imageurl = 'https://www.ydylmold.cn/file/getPlayResource/108/' + item
									.imagesPath
							}
						})
						this.currentPage = res.data.current
						this.allPage = res.data.pages
					}
				})
			},
			sucClick(index) {
				if (!this.isLogin) {
					this.$store.dispatch('showAuthModal');
					return;
				}
				let params = {}
				params['craftsmanId'] = getToken('useNum')
				if (getToken('newsCompany')) {
					params['companyNo'] = getToken('newsCompany')
				}
				params['entityName'] = this.acType
				params['entityId'] = this.detail.id
				searchPortalNewsIsExist(params).then(res => {
					res = res.data
					if (res.code == 200) {
						if (res.data) {
							//引流过
							uni.showModal({
								title: '提示',
								content: '该文案已经引流过，再次引流依旧扣除次数！',
								success: (e) => {
									if (e.confirm) {
										this.sucaiIndex = index
										this.$refs['bomPop'].open()
									}
								}
							})
						} else {
							//没引流过
							this.sucaiIndex = index
							this.$refs['bomPop'].open()
						}
					}
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			timeDifference,
			getDetailById(id) {
				if (!id) {
					return;
				}
				let obj = {}
				let apiName = ''
				if (getToken('newsCompany')) {
					obj['companyNo'] = getToken('newsCompany')
					obj['newsId'] = id
					//console.log('NEWID', id)
					apiName = 'newsData.queryNewsById'
				} else {
					//console.log('NEWID111', id)
					getToken('version') == 1 ? obj['userNo'] = getToken('useNum') : obj['companyNo'] = getToken('useNum')
					obj['newsId'] = id
					// this.acType = 'adbCollege'
				}
				//console.log(apiName, 666)
				this.acType = 'portalNews'
				queryPortalNewsById2(obj).then(res => {
					res = res.data
					//console.log(res, 8888)
					if (res && res.newsId) {
						this.detail = res
						if(this.detail.state == 1){
							this.init()
						}
						//行业新闻和咨询不同点
						this.detail.id = this.detail.newsId
						this.detail.browseQty = this.detail.brows
						this.detail.publishDate = this.detail.createDate
						this.detail.introduce = this.detail.content
						this.detail.classTypeId = this.detail.typeId
						this.detail.saveQty = this.detail.count > 9999 ? (this.detail.count / 10000).toFixed(1) +
							'w' : this.detail.count > 999 ? (this.detail.count / 1000).toFixed(1) + 'k' : this
							.detail.count
						this.detail.loveQty = this.detail.usrThumbsNum > 9999 ? (this.detail.usrThumbsNum / 10000)
							.toFixed(1) + 'w' : this.detail.usrThumbsNum > 999 ? (this.detail.usrThumbsNum / 1000)
							.toFixed(1) + 'k' : this.detail.usrThumbsNum
						let portalNewsItem = this.detail.portalNewsItem
						//console.log(portalNewsItem,111)
						if (portalNewsItem && this.hasData == false) {
							//上 下
							this.currentItem = {
								companyId: '',
								content: '',
								craftsmanId: '',
								id: '',
								imagesPath: '',
								imageurl: ''
							}
							this.currentItem1 = {
								companyId: '',
								content: '',
								craftsmanId: '',
								id: '',
								imagesPath: '',
								imageurl: ''
							}
							if (portalNewsItem.topId) {
								this.currentItem['id'] = portalNewsItem.topId
								this.currentItem['companyId'] = portalNewsItem.companyNo
								this.currentItem['content'] = portalNewsItem.topContent
								this.currentItem['craftsmanId'] = portalNewsItem.craftsmanId
								this.currentItem['imagesPath'] = portalNewsItem.topImg
								this.currentItem['imageurl'] =
									'https://www.ydylmold.cn/file/getPlayResource/108/' + portalNewsItem.topImg
							}
							if (portalNewsItem.endId) {
								this.currentItem1['id'] = portalNewsItem.endId
								this.currentItem1['companyId'] = portalNewsItem.companyNo
								this.currentItem1['content'] = portalNewsItem.endContent
								this.currentItem1['craftsmanId'] = portalNewsItem.craftsmanId
								this.currentItem1['imagesPath'] = portalNewsItem.endImg
								this.currentItem1['imageurl'] =
									'https://www.ydylmold.cn/file/getPlayResource/108/' + portalNewsItem.endImg
							}
							if (this.isLogin) {
								if (portalNewsItem.companyNo == getToken('useNum') || portalNewsItem.craftsmanId ==
									getToken('useNum')) {
									this.isOther = false
								} else {
									this.isOther = true
								}
							}
							//console.log('898999999999', this.currentItem, this.currentItem1)
						}
						// 分享
						let cont = convertHtmlToText(this.detail && this.detail.introduce) //解析富文本
						let shareInfo = {
							title: this.detail.title, // => 名称
							imgUrl: getToken('companyLogo') ||
								'https://job.ydylmold.cn/mingpian/image/ming-logo.png', // => logo
							desc: cont, //描述
						}
						let currItem = {}
						if(this.acItem.id){
							currItem = this.acItem
						}else{
							currItem = this.detail.portalNewsItem
						}
						//初始化分享
						// #ifdef H5
						shareInfo.path =
							`https://job.ydylmold.cn/mingpian/index.html#/pages/newsPart/index/newsDetail?newsId=${this.acId}` +
							`&item=${encodeURIComponent(JSON.stringify(currItem))}&isShare=1`
						onShareData(shareInfo)
						// #endif
						// #ifdef MP-WEIXIN
						delete shareInfo.imgUrl
						let pages = getCurrentPages();
						let currentPage = pages[pages.length - 1];
						shareInfo.path = currentPage.$page.fullPath;
						shareInfo.path = shareInfo.path +
							`&item=${encodeURIComponent(JSON.stringify(currItem))}&isShare=1`
						this.$store.commit('setShareWx', shareInfo)
						// #endif
						if (this.detail && this.detail.audios) {
							this.current.src = this.$filePath + '110/' + this.detail.audios
						}
						//初始化评论
						this.common = new Common({
							id: this.acId,
							type: 'portalNews',
							detail: this.detail
						}, msg => {
				console.log(msg, '11111111111111111111111111111111')
							this.getCommData(msg)
						});
					}
				})
			},
			/*
			评论相关
			*/
			//获取解析数据
			getCommData(msg) {
				if (msg.type == 'commData') { //评论数据接收
					this.commentData = msg.data.commentData
					console.log(this.commentData, 888888)
				}
				if (msg.type == 'detailData') { //详情数据接收
					this.detail = msg.data.detailData
				}
				if (msg.type == 'currIdF') { //当前滑动下标接收
					this.currIdF = msg.data.currIdF
				}
			},
			// 删除评论
			delCom(e) {
				this.common.delCom(e)
			},
			//获取下一页评论
			async getLast() {
				this.common.getLast()
			},
			//点赞
			memberLike() {
				this.common.memberLike()
			},
			// 收藏
			collectionPost() {
				this.common.collectionPost()
			},
			//添加评论
			add(e) {
				this.common.add(e)
			}
		}
	}
</script>
<style scoped lang="scss">
	.yindao {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);

		image {
			width: 700rpx;
			height: 500rpx;
			margin-left: 10rpx;
		}
	}

	.cont-box {
		display: flex;
		flex-direction: column;
		position: relative;
		padding-bottom: 100rpx;
	}

	.selection {
		margin-top: 20rpx;
		overflow: hidden;
		padding-bottom: 100rpx;

		.title {
			padding: 20rpx 0;
			text-indent: 30rpx;
			color: #4D4D4D;
			border-bottom: 2rpx solid #f3f4f6;
		}
	}

	.item-title {
		text-align: center;
		font-size: 32rpx;
	}

	.item-time {
		font-size: 28rpx;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		color: #A8A8A8;
	}

	.material {
		background-color: #F5F6F6;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 300rpx;
		color: #474643;
		position: relative;
	}

	.material1 {
		background-color: #F5F6F6;
		margin: 20rpx 0;
		display: flex;
		height: 300rpx;
		color: #474643;
		position: relative;
	}

	.sel-pop {
		background-color: #F8F8F8;
		padding: 30rpx;
	}

	.itemlist {
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: white;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.listText {
		font-size: 30rpx;
		white-space: normal;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		/* 行数 */
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.btnBox {
		margin-bottom: 100rpx;
		height: 66rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.blue-btn {
		// padding: 20rpx 140rpx;
		flex: 1;
		line-height: 88rpx;
		text-align: center;
		background-color: #3C9CFF;
		border-radius: 10rpx;
		color: white;
		font-size: 36rpx;
		font-weight: 600;
	}

	.saveBox {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30px;
		background-color: white;
		padding: 10rpx 0;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
	}
</style>
